 /*
 * @description: 辅助线条组件
 * @Author: along
 * @Date: 2020-09-08
 * @Last Modified by: along
 * @Last Modified time: 2020-09-11
 */
<template>
    <div
        class="lineControl"
        @click="emitEvent(5)"
        :style="{background: baseconfig.style.backgroundColor}"
    >
        <div
            class="lineControl-lines"
            :style="{borderWidth: baseconfig.style.height / 2 + 'px', borderColor: baseconfig.style.color, borderStyle: baseconfig.style.style, marginTop: baseconfig.style.marginV / 2 + 'px', marginBottom: baseconfig.style.marginV / 2 + 'px', minHeight: baseconfig.style.height / 2 + 'px'}"
        />
    </div>
</template>

<script>
export default {
    name: 'AuxLine',
    props: {
        baseconfig: {
            type: Object,
            default: () => {}
        },
        index: {//存在多个相同组件,查询当前位置
            type: Number,
            default: () => {}
        }
    },
    data () {
        return {

        };
    },
    watch: {

    },
    filters: {

    },
    methods: {
        /**
         * @description 点击组件，向上级传递点击类型
         */
        emitEvent (type) {
            this.$emit('emit', {
                type: type,//组件类型
                index: this.index//组件位置
            });
        }
    }
};
</script>

<style lang="less" scoped>
.lineControl {
    width: 375px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px dashed #ffffff;
    overflow: hidden;
    .lineControl-lines {
        width: 375px;
        height: 1px;
        border: 1px #000 solid;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    &:hover {
        border: 1px dashed #1890FF;
    }
}
</style>